<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="行业" prop="industry">
        <el-input
          v-model="queryParams.industry"
          placeholder="请输入行业"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="标签" prop="tags">
        <el-input
          v-model="queryParams.tags"
          placeholder="请输入标签"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row
      :gutter="10"
      class="mb8"
      style="background-color: #f5f5f5; padding: 15px; border-radius: 5px"
    >
      <el-col :span="6">
        <el-select
          v-model="queryParams.type"
          class="m-2"
          placeholder="请选择用户类型"
          size="large"
          @changge="handleCustomerTypeChangge"
        >
          <el-option
            v-for="dict in circle_way"
            :key="dict.value"
            :label="dict.label"
            :value="parseInt(dict.value)"
          />
        </el-select>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['main:circle:add']"
          >创建社交圈子</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="Upload"
          @click="handleImport"
          v-hasPermi="['main:circle:import']"
          >批量录入成员</el-button
        >
      </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="circleList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="圈子图标" align="center" prop="icon" width="100">
        <template #default="scope">
          <image-preview :src="scope.row.icon" :width="50" :height="50" />
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center" prop="name" />
      <el-table-column label="群人数" align="center" prop="memberNum" />
      <!-- prop="memberNum" -->
      <el-table-column label="是否推荐首页" width="100">
        <template #default="scope">
          <el-switch
            v-model="scope.row.isHome"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @click="switchChange(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="小圈子是否推送到搜索" width="100">
        <template #default="scope">
          <el-switch
            v-if="scope.row.way == 1"
            v-model="scope.row.isSearch"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @click="minSwitchChange(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <!-- <template #default="scope">
          <router-link :to="'/supplier/supplierView/index/' +scope.row.id +'/2' " class="link-type">
            <el-button link type="primary" icon="View" >圈子动态</el-button>
          </router-link>
          <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['main:circle:view']">顶置管理</el-button>
          <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['main:circle:view']">付费进圈</el-button>
          <el-button link type="primary" icon="View" @click="handleView(scope.row)" v-hasPermi="['main:circle:view']">查看详情</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['main:circle:remove']">删除</el-button>
        </template> -->

        <template #default="scope">
          <el-tooltip content="圈子设置" placement="top">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:user:edit']"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button
              link
              type="primary"
              icon="Delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:user:remove']"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="顶置管理" placement="top">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="handleOverhead(scope.row)"
              v-hasPermi="['system:user:projectList']"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="电话展示" placement="top">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="handleShow(scope.row)"
              v-hasPermi="['system:user:projectList']"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="管理员设置" placement="top">
            <!-- @click="handleAdmin(scope.row)" -->
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="memberLink(scope.row)"
              v-hasPermi="['system:user:editBond']"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="圈子成员" placement="top">
            <el-button
              link
              type="primary"
              icon="CircleCheck"
              @click="memberLink(scope.row)"
              v-hasPermi="['system:user:bondList']"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="圈子动态" placement="top">
            <el-button
              link
              type="primary"
              icon="CircleCheck"
              @click="treadsLink(scope.row)"
              v-hasPermi="['system:user:bondList']"
            ></el-button>
          </el-tooltip>

          <el-tooltip content="圈子成员数" placement="top">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="memberEditLink(scope.row)"
              v-hasPermi="['system:user:editBond']"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="圈子浏览数" placement="top">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="browseEditLink(scope.row)"
              v-hasPermi="['system:user:editBond']"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改圈子对话框 -->
    <el-dialog
      :title="title"
      v-model="open"
      width="860px"
      append-to-body
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form ref="circleRef" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="10" class="mb8">
          <el-col :span="12">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行业" prop="industryId">
              <el-tree-select
                v-model="form.industryId"
                :data="industryList"
                :render-after-expand="false"
                :props="{
                  label: 'name',
                  value: 'id',
                  isLeaf: 'isLeaf', // 假定支持判断是否叶子节点的属性
                }"
                style="width: 240px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="12">
            <el-form-item label="标签" prop="tags">
              <el-input v-model="form.tags" placeholder="请输入标签" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="咨询微信号" prop="wx">
              <el-input v-model="form.wx" placeholder="请输入咨询微信号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="12">
            <el-form-item label="图标" prop="icon">
              <image-upload v-model="form.icon" :fileSize="1" :limit="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="圈子大图" prop="backImage">
              <image-upload v-model="form.backImage" :fileSize="1" :limit="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主圈二维码" prop="qrCodeUrl">
              <image-upload v-model="form.qrCodeUrl" :fileSize="1" :limit="1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="24">
            <el-form-item label="圈子介绍">
              <editor v-model="form.brief" :min-height="120" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="24">
            <el-form-item label="圈子价值" prop="effect">
              <editor v-model="form.effect" :min-height="120" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="10" class="mb8">
          <el-col :span="24">
            <el-form-item label="收费规则" prop="rule">
              <editor v-model="form.rule" :min-height="120" />
            </el-form-item>
          </el-col>
        </el-row> -->

        <el-row :gutter="10" class="mb8">
          <el-col :span="12">
            <el-form-item label="手机号加密方式" prop="encry">
              <el-select
                v-model="form.encry"
                class="m-2"
                placeholder="请选择手机号加密方式"
                size="large"
              >
                <el-option
                  v-for="dict in encry_type"
                  :key="dict.label"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="社区发言权限" prop="industry">
              <el-select
                v-model="form.speak"
                class="m-2"
                placeholder="请选择社区发言权限"
                size="large"
              >
                <el-option
                  v-for="dict in speak_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="12">
            <el-form-item label="排序方式" prop="sortBy">
              <el-select
                v-model="form.sortBy"
                class="m-2"
                placeholder="请选择排序方式"
                size="large"
              >
                <el-option
                  v-for="dict in sort_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入群填写项" prop="fills">
              <el-select
                v-model="form.fills"
                multiple
                class="m-2"
                placeholder="请选择入群填写项"
                size="large"
              >
                <el-option
                  v-for="dict in fills_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="12">
            <el-form-item label="收费金额" prop="name">
              <el-input-number :min="0" v-model="form.serviceFee" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收费周期" prop="cycle">
              <el-select
                v-model="form.cycle"
                class="m-2"
                placeholder="请选择收费周期"
                size="large"
              >
                <el-option
                  v-for="dict in join_ctyle"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 查看详情 -->
    <el-dialog
      title="查看详情"
      v-model="viewOpen"
      width="960px"
      append-to-body
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-skeleton :loading="loading" animated :count="1">
        <template #template>
          <div style="display: flex">
            <el-skeleton-item
              variant="image"
              style="width: 400px; height: 267px; margin-right: 20px"
            />
            <div>
              <el-skeleton-item variant="h3" style="margin-bottom: 16px" />
              <el-skeleton-item variant="text" />
              <el-skeleton-item variant="text" style="width: 80%" />
            </div>
          </div>
        </template>
        <template #default>
          <div style="display: flex; align-items: start">
            <img
              :src="form.backImage"
              class="image"
              style="width: 400px; height: auto; margin-right: 20px"
            />
            <div style="flex-grow: 1">
              <div style="margin-bottom: 20px">
                <span style="font-size: 18px; font-weight: bold">基本信息</span>
                <ul style="list-style-type: none; padding: 0; margin-top: 10px">
                  <li style="margin-bottom: 8px">群名称：{{ form.name }}</li>
                  <li style="margin-bottom: 8px">
                    运营时间：{{ form.createTime }}
                  </li>
                  <li style="margin-bottom: 8px">
                    加入人数：{{ form.memberNum }}
                  </li>
                  <li style="margin-bottom: 8px">
                    动态数据：{{ form.trendsNum }}
                  </li>
                  <li style="margin-bottom: 8px">
                    最近一次更新时间：{{ form.updateTime }}
                  </li>
                </ul>
              </div>
              <div>
                <span style="font-size: 18px; font-weight: bold">圈子介绍</span>
                <div
                  style="margin-top: 10px; min-height: 120px"
                  v-html="form.brief"
                ></div>
              </div>
              <div>
                <span style="font-size: 18px; font-weight: bold">圈子价值</span>
                <div
                  style="margin-top: 10px; min-height: 120px"
                  v-html="form.effect"
                ></div>
              </div>
              <!-- <div>
                <span style="font-size: 18px; font-weight: bold">收费规则</span>
                <div
                  style="margin-top: 10px; min-height: 120px"
                  v-html="form.rule"
                ></div>
              </div> -->
            </div>
          </div>
        </template>
      </el-skeleton>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog
      :title="upload.title"
      v-model="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link
              type="primary"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate"
              >下载模板</el-link
            >
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog :title="title" v-model="showOpen" width="500px" append-to-body>
      <el-form ref="circleRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item
          label="顶置开关"
          prop="isOverhead"
          v-if="title == '顶置管理'"
        >
          <el-radio-group v-model="form.isOverhead">
            <el-radio value="0" size="large">关</el-radio>
            <el-radio value="1" size="large">开</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电话展示" prop="isShow" v-if="title == '电话展示'">
          <el-radio-group v-model="form.isShow">
            <el-radio value="0" size="large">关</el-radio>
            <el-radio value="1" size="large">开</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="圈子成员数"
          prop="memberNum"
          v-if="title == '圈子成员数'"
        >
          <el-radio-group v-model="form.memberNum">
            <el-input v-model="form.memberNum" placeholder="请输入圈子成员数" />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="圈子浏览数"
          prop="scanNum"
          v-if="title == '圈子浏览数'"
        >
          <el-radio-group v-model="form.scanNum">
            <el-input v-model="form.scanNum" placeholder="请输入圈子浏览数" />
          </el-radio-group>
        </el-form-item>
        <el-form-item v-for="(item, index) in form.rules" :key="index">
          <el-row>
            <el-col :span="11">
              <el-input v-model.trim="item.value1" placeholder="value1">
                <!-- 在第一个输入框后面添加元单位 -->
                <template #append>元</template>
              </el-input>
            </el-col>
            <el-col :span="2"><!-- 占位 --></el-col>
            <el-col :span="11">
              <el-input v-model.trim="item.value2" placeholder="value2">
                <!-- 在第二个输入框后面添加天单位 -->
                <template #append>天</template>
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Circle">
import { getToken } from "@/utils/auth";
import {
  listCircle,
  getCircle,
  delCircle,
  addOrUpdateCircle,
  setRule,
  setAdmin,
  editRule,
  editMemberNum,
  editBrowseNum,
} from "@/api/main/circle";
import { listAllIndustry } from "@/api/main/industry";

const { proxy } = getCurrentInstance();
const router = useRouter();
const selectValue = ref(true);
const {
  circle_type,
  circle_way,
  encry_type,
  speak_type,
  sort_type,
  fills_type,
  join_ctyle,
} = proxy.useDict(
  "circle_type",
  "circle_way",
  "encry_type",
  "speak_type",
  "sort_type",
  "fills_type",
  "join_ctyle"
);
const circleList = ref([]);
const open = ref(false);
const showOpen = ref(false);
const viewOpen = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const title = ref("");
const memberList = ref([]);
const industryList = ref([]);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);

const show = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
});
const overhead = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
});

const data = reactive({
  form: {},
  showform: {},
  memberform: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    type: null,
    way: null,
    icon: null,
    backImage: null,
    name: null,
    memberNum: null,
    trendsNum: null,
    scanNum: null,
    hotNum: null,
    brief: null,
    effect: null,
    rule: null,
    industry: null,
    tags: null,
    phonenumber: null,
    wx: null,
    isShow: null,
    showFee: null,
    isOverhead: null,
    overheadFee: null,
    serviceFee: null,
    cycle: null,
    memo: null,
    status: null,
    createUser: null,
    createName: null,
    updateUser: null,
    updateName: null,
    qrCodeUrl: null,
  },
  rules: {
    status: [{ required: true, message: "状态不能为空", trigger: "change" }],
    delFlag: [
      { required: true, message: "是否删除;0否1是不能为空", trigger: "change" },
    ],
  },
});
const { queryParams, form, rules } = toRefs(data);

/*** 用户导入参数 */
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  //  上传地址
  url: "",
});

/** 查询圈子列表 */
function getList() {
  loading.value = true;
  listCircle(queryParams.value).then((response) => {
    circleList.value = response.rows.map((items) => {
      return {
        ...items,
        isSearch: items.isSearch == 1 ? true : false,
        isHome: items.isHome == 1 ? true : false,
      };
    });
    total.value = response.total;
    loading.value = false;
  });
}
function getIndustryList() {
  listAllIndustry().then((res) => {
    industryList.value = res.data;
  });
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

// 取消按钮
function cancel() {
  open.value = false;
  showOpen.value = false;
  viewOpen.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    type: null,
    way: null,
    icon: null,
    backImage: null,
    name: null,
    memberNum: null,
    trendsNum: null,
    scanNum: null,
    hotNum: null,
    brief: null,
    effect: null,
    rule: null,
    industry: null,
    tags: null,
    phonenumber: null,
    wx: null,
    isShow: null,
    showFee: null,
    isOverhead: null,
    overheadFee: null,
    serviceFee: null,
    cycle: null,
    memo: null,
    status: null,
    delFlag: null,
    createUser: null,
    createName: null,
    createTime: null,
    updateUser: null,
    updateName: null,
    updateTime: null,
    encry: null,
    qrCodeUrl: null,
  };
  proxy.resetForm("circleRef");
  proxy.resetForm("circleRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

function handleAdmin() {
  showOpen.value = true;
}
function memberLink(row) {
  router.push({ path: "/member/" + row.id });
}
function treadsLink(row) {
  router.push({ path: "/trends/listRow/" + row.id });
}
function handleShow(row) {
  setRule(114, row.id).then((res) => {
    showOpen.value = true;
    form.value.rules = res.data;
    form.value.id = row.id;
    form.value.isShow = row.isShow;
    title.value = "电话展示";
  });
}
function handleOverhead(row) {
  setRule(115, row.id).then((res) => {
    showOpen.value = true;
    form.value.rules = res.data;
    form.value.id = row.id;
    form.value.isOverhead = row.isOverhead;
    title.value = "顶置管理";
  });
}
function handleJoin() {
  showOpen.value = true;
}
import { ElMessage, ElMessageBox } from "element-plus";
const switchChange = (e) => {
  const check = e.isHome == true ? 1 : e.isHome == 1 ? 1 : 0;
  const NewObject = {
    ...form.value,
    cycle: form.value.cycle == "永久" ? 99999 : form.value.cycle,
  };
  addOrUpdateCircle({ isHome: check, id: e.id, ...NewObject }).then(
    async (res) => {
      ElMessage({
        type: "success",
        message: "修改成功",
      });
      getList();
    }
  );
  console.log(e);
};

/**
 * 成员数
 * @param row
 */
function memberEditLink(row) {
  showOpen.value = true;
  form.value.id = row.id;
  form.value.memberNum = row.memberNum;
  title.value = "圈子成员数";
}

/**
 * 浏览数
 * @param row
 */
function browseEditLink(row) {
  showOpen.value = true;
  form.value.id = row.id;
  form.value.scanNum = row.scanNum;
  title.value = "圈子浏览数";
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加圈子";
}

function handleUpdate(row) {
  reset();
  open.value = true;
  getCircle(row.id).then((response) => {
    form.value = response.data;
    // viewOpen.value = true;
  });
  title.value = "查看详情";
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["circleRef"].validate((valid) => {
    if (valid) {
      form.value.type = 0;
      form.value.way = 0;
      form.value.isHome = 1;
      const NewObject = {
        ...form.value,
        cycle: form.value.cycle == "永久" ? 99999 : form.value.cycle,
      };
      addOrUpdateCircle(NewObject).then((response) => {
        proxy.$modal.msgSuccess("操作成功");
        open.value = false;
        showOpen.value = false;
        getList();
      });
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal
    .confirm("是否确认删除【" + row.name + "】？")
    .then(function () {
      return delCircle(row.id);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

/** 用户类型改变事件 */
function handleCustomerTypeChangge() {
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = 10;
  handleQuery();
}

/** 查看详情 */
function handleView(row) {
  reset();
  getCircle(row.id).then((response) => {
    form.value = response.data;
    viewOpen.value = true;
  });
}

/** 批量录入成员 */
function handleImport() {
  if (ids.value.length < 1)
    return proxy.$modal.msgError("请选择需要导入成员的圈子");
  upload.title = "批量录入成员";
  upload.open = true;
}

/** 下载模板操作 */
function importTemplate() {
  if (ids.value.length <= 0) {
    return proxy.$modal.msgError("请选择需要导入成员的圈子");
  }
  proxy.download(
    "pc/member/importTemplate?circleId=" + ids.value,
    {},
    `导入成员模板${new Date().getTime()}.xlsx`
  );
  // proxy.download(
  //   "pc/member/importTemplate?circleId=" + ids,
  //   {},
  //   `user_template_${new Date().getTime()}.xlsx`
  // );
}

/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};

/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {
  upload.importOpen = false;
  upload.isUploading = false;
  loading.value = false;
  proxy.$refs["uploadRef"].handleRemove(file);
  if (response.code == 200) {
    getList();
    proxy.$modal.msgSuccess("上传成功");
  } else {
    proxy.$modal.msgError(response.msg);
  }
};

/** 提交上传文件 */
function submitFileForm() {
  loading.value = true;
  upload.open = false;
  // upload.open.value = false;
  // console.log(upload, ids.value);
  (upload.url =
    import.meta.env.VITE_APP_BASE_API + "/pc/member/import/" + ids.value[0]),
    proxy.$refs["uploadRef"].submit();
}

getList();
getIndustryList();

const minSwitchChange = async (e) => {
  const check = e.isSearch == true ? 1 : e.isSearch == 1 ? 1 : 0;
  const response = await addOrUpdateCircle({
    id: e.id,
    isSearch: check,
  });
  if (response && response.code == 200) {
    ElMessage({
      type: "success",
      message: "修改成功",
    });
    getList();
  }
};
</script>
